<template>
  <div
    class='pr'
    style="width:100%;height:100%;"
  >
    <div
      class='pa fss'
      style="z-index:10;flex-direction: row-reverse;width:calc(100% - 10px);"
    >
      <timerRange v-model="flag" />
    </div>
    <div
      id='echart6'
      style="width:calc(24vw - 20px);height:calc( (100vh - 78px - 3vw) / 3 );margin-left:10px;"
    ></div>
    <RepairViewList
      :filters="filters"
      :sub_title="sub_title"
      v-model="dialog_visible"
    />
  </div>
</template>

<script>
import { init, graphic } from "echarts";
import RepairViewList from "./RepairViewList.vue";
import { getColumns } from "../../../generate";
export default {
  name: "box6",
  components: {
    RepairViewList,
  },
  data: function () {
    return {
      flag: 2,
       dialog_visible: false, 
      sub_title:null,
      filters:[],
    };
  },
  watch: {
    flag: {
      handler: "initCharts",
      immediate: true,
    },
  },
  myChart: null,
  async mounted() {
    this.columns = await getColumns("RepairViewListModel");
  },
  methods: {
    async initCharts() {
      const data = await this.$http.get(
        `/api/RepairReport/RepairLargeScreenModelHList?flag=${this.flag}`
      );
      if (!this.myChart) {
        this.myChart = init(document.getElementById("echart6"));
        this.myChart.on("click", (ev) => {
          this.filters = [
            {
              Name: "ApplyTime",
              compare: ">=",
              value: ev.data.Ds,
            },
            {
              Name: "ApplyTime",
              compare: "<",
              value: ev.data.De,
            },
            {
              Name: "Dept_Id",
              compare: "==",
              value: ev.data.Dept_Id,
            },
          ];
          this.sub_title = `日期起:${ev.data.Ds.substring(
            0,
            10
          )} 日期止:${ev.data.De.substring(0, 10)} 科室:${ev.data.DeptName}`;
          this.dialog_visible = true;
        });
      }
      const option = {
        yAxis: {
          show: false,
        },
        grid: {
          bottom: 86,
        },
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            rotate: 45,
            hideOverlap: true,
            color: "#fff",
          },
          data: data.map((i) => i.DeptName.length<=7?i.DeptName:(i.DeptName.slice(0,7)+'...')),
        },
        series: [
          {
            type: "bar",
            barWidth: 20,
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
              // formatter:e=>e.value+'%'
            },
            itemStyle: {
              normal: {
                color: new graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, // 从上到下变浅
                  [
                    {
                      offset: 0,
                      color: "#03a98a",
                    },
                    {
                      offset: 1,
                      color: "#25527d",
                    },
                  ],
                  false
                ),
                opacity: 1,
              },
            },
            data: data.map((i) => ({
              ...i,
              value: parseInt(i.Cost),
            })),
          },
        ],
        color: this.colors,
        textStyle:{
          fontFamily:'AP'
        }
      };
      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
    resize(){
      this.myChart.resize()
    }
  },
};
</script>

<style>
</style>